<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维数组变为一维数组</title>
</head>
<body>
<script>
    /**
     * 方法：Array.flat();
     * 功能：将嵌套数组‘拉平’，即变为一维的
     * 返回：一个新数组，不影响原始数组
     * 参数：有多层数组嵌套时，指定拉平的层数【默认 1】
     * */
    [1, 2, [3, 4]].flat() // [1, 2, 3, 4]

    [1, 2, [3, [4, 5]]].flat() // 默认1 层
    // [1, 2, 3, [4, 5]]

    [1, 2, [3, [4, 5]]].flat(2) // 指定拉平两层
    // [1, 2, 3, 4, 5]

    /* 比较偷懒的做法 */
    // 不管有多少层嵌套，都要转成一维数组，可以用 Infinity 关键字作为参数
    [1, [2, [3]]].flat(Infinity)// [1, 2, 3]

    // 原数组有空位，flat()方法会跳过空位
    [1, 2, , 4, 5].flat() // [1, 2, 4, 5]

    /**
     * 方法：Array.flatMap();【flat：平的】
     * 功能：经过某个函数处理返回的数组，再调用flat方法【功能和上面一样】
     * 参数：
     *      1. 遍历函数 【相当于执行Array.prototype.map()】
     *      可三个参数：
     *          1. 当前数组成员 currentValue
         *      2. 当前数组成员的位置【从 0 开始】 index
         *      3. 原数组  array
     *      2. 绑定遍历函数里面的this 对象
     * 实现：对原数组的每个成员执行一个函数；然后对返回值组成的数组执行flat()方法
     * 返回：一个新数组，不影响原始数组
     * */
    // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])// [2, 4, 3, 6, 4, 8]
    /*
    * [2, 3, 4].flatMap(function(x){
    *   return [x, x*2] ==> [2, 4, 3, 6, 4, 8]
    * })
    * [2, 3, 4].map(function(x){
    *   return [x, x*2] ==> [[2, 4], [3, 6], [4, 8]]
    * })
    * */
    // 不过 flatMap()只能展开一层数组
    // 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
    [1, 2, 3, 4].flatMap(x => [[x * 2]])
    // [[2], [4], [6], [8]]

    // flatMap()里的函数有参数时：
    arr.flatMap(function callback(currentValue, index, array){

    }, thisArg)// 设置 callback 函数的this对象
</script>
</body>
</html>